<!-- HTML structures -->
<style>
.scrollable {
    float: left;
}
.scrollable {
    background: url("/img/global/gradient/h300.png") repeat-x scroll 0 0 transparent;
    border: 1px solid #CCCCCC;
    height: 320px;
    overflow: hidden;
    position: relative;
    width: 180px;
}
.scrollable .items {
    clear: both;
    position: absolute;
    height: 20000em;
}
.items div {    
    width: 180px;
}
.scrollable img {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;    
    height: 75px;
    margin: 20px 5px 20px 21px;
    padding: 2px;
    width: 100px;
}
.scrollable .active {
    border: 2px solid #000000;
    cursor: default;
    position: relative;
}

a.browse {
    background: url("../img/scrollable/arrow/hori_large.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 15px;
    height: 30px;
    margin: 40px 10px;
    width: 30px;
}
a.right {
    background-position: 0 -30px;
    clear: right;
    margin-right: 0;
}
a.right:hover {
    background-position: -30px -30px;
}
a.right:active {
    background-position: -60px -30px;
}
a.left {
    margin-left: 0;
}
a.left:hover {
    background-position: -30px 0;
}
a.left:active {
    background-position: -60px 0;
}
a.up, a.down {
    background: url("../img/scrollable/arrow/vert_large.png") no-repeat scroll 0 0 transparent;
    float: none;
    margin: 10px 50px;
}
a.up:hover {
    background-position: -30px 0;
}
a.up:active {
    background-position: -60px 0;
}
a.down {
    background-position: 0 -30px;
}
a.down:hover {
    background-position: -30px -30px;
}
a.down:active {
    background-position: -60px -30px;
}
a.disabled {
    visibility: hidden !important;
}
</style>
<!-- "previous page" action -->
<a class="prev browse left">Previous</a>
<!-- root element for scrollable -->
<div class="scrollable">   
   <!-- root element for the items -->
   <div class="items">
      <!-- 1-5 -->
      <div>
         <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
         <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
         <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
         <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
         <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" />
      </div>
      <!-- 5-10 -->
      <div>
         <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" />
         <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" />
         <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" />
         <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" />
         <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" />
      </div>
      <!-- 10-15 -->
      <div>
         <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" />
         <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" />
         <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" />
         <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" />
         <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" />
      </div>
   </div>
</div>
<!-- "next page" action -->
<a class="next browse right">Next</a>

<br clear="all" />

<!-- javascript coding -->


<script>
// execute your scripts when the DOM is ready. this is mostly a good habit
$(function() {

	// initialize scrollable
	$(".scrollable").scrollable({vertical: true, mousewheel: true});

});
</script>